<template>
	<div class="entrance">
		<x-header title="团购" style="z-index:9999;" class="blues" :left-options="{backText: ''}">
			<a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
		</x-header>
		<div class="content">
			<div class="stores" @click="selectStore" v-if="!is_open1">
				<p>广客缘客家三及第</p>
				<img :class="{open1:is_open1}" src="../../assets/images/groups/arrow.png" alt="" />
			</div>
			<div class="stores2" @click="selectStore" v-if="is_open1">
				<div class="store_name">
					<p>广客缘客家三及第</p>
					<img :class="{open1:is_open1}" src="../../assets/images/groups/arrow.png" alt="" />
				</div>
				<div class="store_info">
					<div class="select_store_name">
						<p>深圳</p>
						<p>广客缘客家三及第</p>
						<img src="../../assets/images/groups/sel_store.jpg" alt="" />
					</div>
					<div class="store_lists">
						<div class="store_list_left"></div>
						<div class="store_list_right"></div>
					</div>
				</div>
			</div>
			<div class="evaluates">
				<div class="evaluates_nav">
					<h3>销量评估</h3>
					<div class="date_tab">
						<tab>
							<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">昨天</tab-item>
							<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">上周</tab-item>
							<tab-item :selected="selectIndex===2" @on-item-click="onItemClick">上月</tab-item>
						</tab>
					</div>
				</div>
				<div class="trade_area">
					<p>商圈平均销量</p>
					<div>
						<x-progress style="width:6.8rem;" :percent="percent1" :show-cancel="false"></x-progress>
						<span>{{ percent1 }}张</span>
					</div>
				</div>
				<div class="my_store">
					<p>我的门店销量</p>
					<div>
						<x-progress style="width:6.8rem;" :percent="percent2" :show-cancel="false"></x-progress>
						<span>{{ percent2 }}张</span>
					</div>
				</div>
			</div>
			<div class="analysis">
				<h1>小团分析</h1>
				<div>
					<img src="../../assets/images/groups/cartoon.png" alt="" />
					<p>
						<span>您的门店没有销量，快看看小美的建议吧。</span>
						<span>为您定制如下方案提升销量：</span>
					</p>
				</div>
			</div>
			<div class="more_skills">
				<p>学习更多营销技巧</p>
				<h5>餐饮学院为您提供丰富的技巧，和同行成功案例分析，帮助您提升销量！</h5>
				<button>去餐饮学院</button>
			</div>
		</div>
		<div class="mask" v-if="is_open1"></div>
	</div>	
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, XProgress } from 'vux';
	export default {
		name: 'entrance',
		data() {
			return {
				is_open1: false,
				selectIndex: 0, //0-昨天  1-上周  2-上月
				percent1: 20, //
				percent2: 40, //
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			XProgress
		},
		computed: {

		},
		created() {
			removeCookie('bar_index');
		},
		methods: {
			//帮助中心
			goHelp(){
				this.$router.push('/customerService');
			},
			//选店
			selectStore() {
				this.is_open1 = !this.is_open1;
			},
			//昨天切换
			onItemClick(val) {
				this.selectIndex = val;
				if(this.selectIndex === 0) {
					this.percent1 = 20;
					this.percent2 = 40;
				} else if(this.selectIndex === 1) {
					this.percent1 = 40;
					this.percent2 = 60;
				} else if(this.selectIndex === 2) {
					this.percent1 = 60;
					this.percent2 = 80;
				}
			},			
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.entrance {
		background: #fff;
		padding-bottom: 1.5rem;
		.content {
			.stores {
				display: flex;
				align-items: center;
				padding: .38rem;
				border-bottom: 1px solid #fff;
				p {
					font-size: .32rem;
					color: #030303;
				}
				img {
					width: .3rem;
					height: .3rem;
					margin-left: .14rem;
				}
				.open1 {
					transform: rotate(180deg);
				}
			}
			.stores2 {
				position: relative;
				background: #fff;
				z-index: 9999;				
				.store_name {
					display: flex;
					align-items: center;
					padding: .38rem;
					border-bottom: 1px solid #e7e7e7;
					p {
						font-size: .32rem;
						color: #030303;
					}
					img {
						width: .3rem;
						height: .3rem;
						margin-left: .14rem;
					}
					.open1 {
						transform: rotate(180deg);
					}
				}
				.store_info {
					width: 7.5rem;
					position: absolute;
					top: 1.2rem;
					left: 0;
					background: #fff;
					z-index: 9999;
					.select_store_name {
						display: flex;
						justify-content: space-around;
						align-items: center;
						padding: .28rem 0;
						border-bottom: 1px solid #e7e7e7;
						p {
							font-size: .28rem;
							color: #22beac;
						}
						img {
							width: .28rem;
							height: .22rem;
						}
					}
					.store_lists {
						display: flex;
						height: 6.06rem;
						border-bottom: 1px solid #e7e7e7;
						.store_list_left {
							width: 2.08rem;
							background: #efefef;
						}
						.store_list_right {
							width: 5.42rem;
							background: #fff;
						}
					}
				}
			}
			.evaluates {
				width: 89.33%;
				margin: 0 auto;
				padding-bottom: .38rem;
				border-bottom: 1px solid #f1f1f2;
				.evaluates_nav {
					display: flex;
					justify-content: space-between;
					align-items: center;
					h3 {
						font-size: .32rem;
						color: #131313;
					}
					.date_tab {
						width: 2rem;
					}
				}
				.trade_area,
				.my_store {
					text-align: left;
					overflow: hidden;
					p {
						font-size: .24rem;
						color: #1b1b1b;
					}
					>div {
						display: flex;
						flex-direction: column;
						padding-top: .1rem;
						span {
							font-size: .28rem;
							color: #1b1b1b;
							font-weight: 700;
							margin: .22rem 0 0 .1rem;
						}
					}
				}
				.my_store {
					margin-top: .22rem;
				}
			}
			.analysis {
				text-align: left;
				h1 {
					font-size: .36rem;
					color: #222;
					padding: .36rem 0 .24rem .22rem;
				}
				>div {
					display: flex;
					align-items: center;
					padding: 0 .16rem;
					img {
						width: .78rem;
						height: .78rem;
						margin-right: .14rem;
					}
					p {
						display: flex;
						flex-direction: column;
						span {
							font-size: .24rem;
							color: #020202;
						}
					}
				}
			}
			.more_skills {
				width: 89.33%;
				height: 3rem;
				margin: .38rem auto;
				padding: .36rem .34rem;
				box-shadow: 0 0 10px 5px #ebebeb;
				p {
					font-size: .26rem;
					color: #202020;
					text-align: left;
				}
				h5 {
					font-size: .28rem;
					color: #181818;
					text-align: left;
					margin: .14rem 0 .36rem 0;
				}
				button {
					border: none;
					outline: none;
					width: 2.08rem;
					height: .7rem;
					line-height: .7rem;
					font-size: .28rem;
					color: #fff;
					background: #3dc6b6;
					border-radius: .5rem;
				}
			}
		}
	}
	.mask{
		background: #999;		
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;	
		z-index: 999;	
	}
</style>